<template>
  <div class="content">
    <div class="bigImgBox"  ref="maskBox" >
      <img @mousedown="move"  @mousewheel="mWheel" :src="srcPath" alt="加载失败"  class="imgSrc"
          :style="{'width': imgW + 'px','height': imgH + 'px','top': top , 'left': left , 'transform': scale}"/>
    </div>
  </div>

</template>
 
<script>
export default {
  name: 'urlImg',
  props: ['srcPath','listIndex'],
  data () {
    return {
      imgW: 0,
      imgH: 0,
      top: 0,
      left: 0,
      src: '',
      reW: 0, // 原图
      reH: 0,
      scale: 'scale(1)',
      size: 0,
    }
  },
  watch:{
    listIndex(newIndex,oldIndex){
      if(newIndex != oldIndex){
        console.log("buyiyang");
        this.init();
      }
    }
  },
  methods: {
    hideMask () {
      this.$emit('clickMask', false)
    },
    mWheel () {
      let ev = window.event
      let dir = ev.detail ? ev.detail * (-120) : ev.wheelDelta
      // dir = -dir;
      if (dir > 0) {
        this.size += dir / 2000
        this.scale = `scale(${1 + this.size})`
      } else {
        this.size += dir / 2000
        if (this.size < -1) {
          this.size = -1
          this.scale = `scale(${1 + this.size})`
          return
        }
        this.scale = `scale(${1 + this.size})`
      }
    },
    move(e){
        console.log(e,'anxia')
        // let oDiv = document.getElementById("oDiv");        //获取目标元素
        let oDiv = e.target;
        //算出鼠标相对元素的位置
        let disX = e.clientX - oDiv.offsetLeft;
        let disY = e.clientY - oDiv.offsetTop;
        document.onmousemove = (e)=>{       //鼠标按下并移动的事件
            //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
            let left = e.clientX - disX;    
            let top = e.clientY - disY;
            console.log(left,top);
            //移动当前元素
            oDiv.style.left = left + 'px';
            oDiv.style.top = top + 'px';
        };
        document.onmouseup = () => {
            document.onmousemove = null;
            document.onmouseup = null;
        };
    },
    init(){
      this.imgW = 200
      this.imgH = 200 
      this.top = '50%'
      this.left = '50%'
      this.scale = 'scale(1)'
    },
  },
  mounted () {
    this.init();
    // 兼容火狐浏览器
    // let mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? 'DOMMouseScroll' : 'mousewheel' // FF doesn't recognize mousewheel as of FF3.x
    // this.$refs.maskBox.addEventListener(mousewheelevt, this.mWheel, false)
  }
}
</script>
 
<style>
.content{
  width:100%;
  height:100%;
  /* position: absolute; */
}
.bigImgBox {
    width: 100%;
    height:100%;
    position: relative;
    /* position: absolute;
    top: 0;
    left: 0; */
    /* width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9000;
    background-color: rgba(0, 0, 0, .6) */
}
.imgSrc{
  position: absolute;
  left:50%;
  top:50%;
  margin-left:-100px;
  margin-top: -100px;
}
.bigImgBox img {
    /* position: fixed; */
    z-index: 9001;
}
</style>